<!--操作记录页面 -->
<template>
  <div style="line-height: 0px"  >
    <!--    <div  style="text-align: left">-->
    <!--      <el-button type="primary" round>新增货运单</el-button>-->
    <div>
      <el-button type="primary" @click="mapsee()" style="margin-bottom: 10px" plain>
        新增货运单
      </el-button >

      <el-dialog
          width="45%"
          title="新增货运单"
          :visible.sync="dialogFormVisible"
          :before-close="dialogClose">
        <el-form :model="addform" :inline="true" label-width="80px" class="llpr">
          <el-form-item label="运单编号" v-if="false">
            <el-input v-model="addform.fid" autocomplete="off" placeholder="不填写则默认生成"></el-input>
          </el-form-item>

          <el-form-item label="发货人" >
            <el-input v-model="addform.pname" autocomplete="off" placeholder="请输入发货人姓名">
            </el-input>
          </el-form-item>

          <el-form-item label="收货人" >
            <el-input v-model="addform.rname" autocomplete="off" placeholder="请输入收货人姓名"></el-input>
          </el-form-item>

          <el-form-item label="发货地">
            <el-cascader
                :options="options"
                ref="cascaderAddr1"
                v-model="sendOptions"
                @change="sendChange">
            </el-cascader>
          </el-form-item>

          <el-form-item label="收货地">
            <el-cascader
                :options="options"
                ref="cascaderAddr2"
                v-model="receiveOptions"
                @change="receiveChange">
            </el-cascader>
          </el-form-item>

          <el-form-item label="发货电话" >
            <el-input v-model="addform.ptel" autocomplete="off" placeholder="请输入发货人电话" ></el-input>
          </el-form-item>

          <el-form-item label="收货电话" >
            <el-input v-model="addform.rtel" autocomplete="off" placeholder="请输入收货人电话" ></el-input>
          </el-form-item>


          <el-form-item label="发货时间">
            <el-date-picker
                v-model="addform.sdate"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>

          <el-form-item label="待收货款" >
            <el-input v-model="addform.payment" autocomplete="off" placeholder="0代表没有选择代收"></el-input>
          </el-form-item >

          <el-form-item label="返款类型">
            <el-radio-group v-model="addform.refundtype" >
              <el-radio :label="3">无业务</el-radio>
              <el-radio :label="6">即日退</el-radio>
              <el-radio :label="9">三日退</el-radio>
            </el-radio-group>
          </el-form-item><br>

          <el-form-item label="付款方式">
            <el-radio-group v-model="addform.pay">
              <el-radio :label="3">先付</el-radio>
              <el-radio :label="6">货到付款</el-radio>
            </el-radio-group>
          </el-form-item>
          <br>
          <!--货物信息-->

          <el-form-item label="重量(kg)" >
            <el-input v-model="addform.weight" autocomplete="off" placeholder="请输入货物重量"></el-input>
          </el-form-item >

          <el-form-item label="体积(m3)" >
            <el-input v-model="addform.volume" autocomplete="off" placeholder="请输入货物体积"></el-input>
          </el-form-item >
          <br>

          <el-form-item label="是否包含易碎品" label-width="120px">
            <el-radio-group v-model="addform.breakable">
              <el-radio :label="1">是</el-radio>
              <el-radio :label="2">否</el-radio>
            </el-radio-group>
          </el-form-item>

        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false;addform={}">取 消</el-button>
          <el-button type="primary" @click="el()">确 定</el-button>
        </div>
      </el-dialog>

    </div>

    <el-table
        :data="pageInfo.list"
        :header-cell-style="rowStyle"
        :cell-style="rowStyle"
        border
        stripe
        style="width: 100%">
      <!--        @selection-change="handleSelectionChange">-->
      <!--      &lt;!&ndash;多选全选&ndash;&gt;-->
      <!--      <el-table-column-->
      <!--          type="selection"-->
      <!--          width="55">-->
      <!--      </el-table-column>-->

      <el-table-column
          type="index"
          width="50">
      </el-table-column>
      <el-table-column
          prop="fid"
          label="运单编号"
          width="auto">
      </el-table-column>

      <el-table-column
          prop="fare"
          label="运费(元)"
          width="120">
      </el-table-column>
      <el-table-column
          prop="insurancefare"
          label="保险费(元)"
          width="120">
      </el-table-column>
      <el-table-column
          prop="name"
          label="收货人"
          width="120">
      </el-table-column>
      <el-table-column
          prop="occurtime"
          label="发生时间"
          width="230">
      </el-table-column>
      <el-table-column
          prop="auditstatus"
          label="运单状态"
          width="140">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">

        <template slot-scope="scope" >
          <div>
            <router-link tag="div" :to="`/record?id=${scope.row.id}`" >
            <el-button type="primary" size="mini"  @click="addsee(scope.$index,scope.row)" plain
            :disabled = "scope.row.auditstatus == '已审核'?true:false">
              生成运输单
            </el-button>
            </router-link>
          </div>

          <div>
            <router-link tag="div" :to="`/details?id=${scope.row.id}`" >
              <el-button type="success" size="mini"  @click="see(scope.$index,scope.row)" plain>查看详情页</el-button>
            </router-link>
          </div>

          <div>
            <router-link tag="div" :to="`/modify?id=${scope.row.id}`" >
              <el-button type="warning" size="mini"  @click="fix(scope.$index,scope.row)" plain>
                跳转修改页
              </el-button>
            </router-link>
          </div>

          <div>
            <el-button type="danger" size="mini"  @click="open(scope.$index,scope.row)" plain>拉扯删除页</el-button>
          </div>
        </template>

      </el-table-column>
    </el-table>

    <div class="block">
      <!-- page-sizes每页显示数 total 共多少条     -->
      <el-pagination
          style="margin-left: 280px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageInfo.pageNum"
          :page-sizes="[2, 3, 4]"
          :page-size="pageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
let pcas = require('../assets/pca-code.json')
export default {
  methods: {

    //居中
    rowStyle(){
      return "text-align:center";
    },
    //点击新增的同时加载地图
    mapsee(){
      this.dialogFormVisible = true;

    },
    //生成运输单

    addsee(index,row){
      console.log(row)
       this.axios.post("http://localhost:8080/index/addCarriage",row).then(res =>{
         alert("运输单已生成,请前往配车环节进行配车")
         location.reload();
       })
    },
    //-----------------------------------------
    handleClick(row) {
      console.log(row);
    },
    // 获取省市区地址级联
    sendChange(thsAreaCode) {
      thsAreaCode = this.$refs['cascaderAddr1'].getCheckedNodes()[0].pathLabels// 注意2： 获取label值
      // 注意3： 最终结果是个一维数组对象
      // this.form.sendOptions = thsAreaCode[0] + thsAreaCode[1] + thsAreaCode[2];
      // console.log(this.sendOptions);
    },
    receiveChange(thsAreaCode) {
      thsAreaCode = this.$refs['cascaderAddr2'].getCheckedNodes()[0].pathLabels// 注意2： 获取label值
      // 注意3： 最终结果是个一维数组对象
      // this.form.receiveAddress = thsAreaCode[0] + thsAreaCode[1] + thsAreaCode[2];
      // console.log(receiveAddress);
    },

    //分页
    handleSizeChange(val) {
      console.log(`每页: ${val}条`)
      this.pageSize=val;
      this.getFreighContractList();
    },
    //当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val;
      this.getFreighContractList();
    },
    //根据分页展示用户信息
    getFreighContractList(){
      //发送ajax
      this.axios.get("http://localhost:8080/index/"+this.currentPage + "/" + this.pageSize).then(res =>{
        this.pageInfo= res.data.data;

      })
    },
    //详情
    see(index,row){
      console.log(row,index)
    },
    //修改
    fix(index,row){
      console.log(row,index)
      this.getFreighContractList();
    },
    //提交新增
    el(){
      this.dialogFormVisible=false;
      // 发送ajax
      this.addform.paddress = this.sendOptions[0]+","+this.sendOptions[1]+","+this.sendOptions[2];
      this.addform.raddress = this.receiveOptions[0]+","+this.receiveOptions[1]+","+this.receiveOptions[2];
      this.axios.post("http://localhost:8080/index",this.addform).then(res =>{
        this.$message.success("添加成功");
        this.addform={};
        this.dialogFormVisible=false;
        location.reload();
      })
    },
    //删除操作
    open(index,row) {
      console.log(index,row)
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //发送ajax
        //根据单条数据
        this.axios.delete("http://localhost:8080/index/"+row.id).then(res => {
          //根据对象进行删除
          // this.axios.delete("http://localhost:8080/index/detele",row).then(res => {
          location.reload();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //误触
    dialogClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
  },


  data() {
    return {

      refundtype: 6,
      pay:3,
      breakable:2,
      //隐藏或者显示对话框
      dialogFormVisible: false,

      totalSize:10,
      options: pcas,
      sendOptions: [],
      receiveOptions: [],

      formInline: {
        currentPage: 1,
        pageSize:3,
        arrivalTime:'',
      },
      addform: {
        fid:'',
        pname: '',
        ptel:'',
        paddress:'',
        rname: '',
        rtel:'',
        raddress:'',
        weight: '',
        volume: '',
        payment:'',
      },
      formLabelWidth: '120px',
      currentPage4:4,

      tableData: [],
      // 当前页码
      currentPage: 1,
      //每页显示条数
      pageSize: 4 ,
      //  分页插件返回的json对象
      pageInfo: {}
    }
  },
  // 初始化列表数据
  created(){
    this.getFreighContractList();
  },
}
</script>

<style lang="scss" >
 .llpr .el-form-item__label {
   text-align: right;
   vertical-align: middle;
   float: left;
   font-size: 14px;
   color: #000000;
   line-height: 40px;
   padding: 0 12px 0 0;
   box-sizing: border-box;
 }
 .llpr  .el-input__inner:hover {
   border-color: #5b0000;
 }
  .llpr .el-input__inner {
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 100px;
    border: 1px solid #DCDFE6;
    box-sizing: border-box;
    color: #3b3095;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
  }


</style>